<template>
	<el-dialog :title="title" :visible.sync="visible" :before-close="handleClose">
		<el-form :model="form" label-width="80px">
			<el-form-item label="父级菜单">
				<el-tree ref="perTree" :data="treeData" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true">
				</el-tree>
			</el-form-item>
			<el-form-item label="菜单名称">
				<el-input v-model="form.permissionName"></el-input>
			</el-form-item>
			<el-form-item label="菜单编码">
				<el-input v-model="form.permissionCode"></el-input>
			</el-form-item>
			<el-form-item label="菜单描述">
				<el-input v-model="form.description"></el-input>
			</el-form-item>
			<el-form-item label="菜单类型">
				<el-input v-model="form.nodeType"></el-input>
			</el-form-item>
			<el-form-item label="菜单层级">
				<el-input type="number" v-model="form.level"></el-input>
			</el-form-item>
			<el-form-item label="菜单排序">
				<el-input type="number" v-model="form.sort"></el-input>
			</el-form-item>
			<el-form-item label="菜单图标">
				<el-popover
				     placement="bottom"
				     width="450"
				     trigger="click"
				     @show="popoverShow"
				   >
				    <span slot="reference">
				      <el-input suffix-icon='data-icon' v-model='form.icon' placeholder='请输入'>
				       <template slot="append"><i :class="form.icon"/></template>
				      </el-input>
				    </span>
				     <div class="iconList">
						 <i v-for="item in iconList" :key="item" :class="item" @click="setIcon(item)" style="font-size:20px"></i>
				     </div>
				   </el-popover>
			</el-form-item>
			<el-form-item label="菜单链接">
				<el-input v-model="form.linkUrl"></el-input>
			</el-form-item>
			<el-form-item label="菜单路径">
				<el-input v-model="form.path"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
import { Message } from 'element-ui';
import { saveOrUpdatePermission } from './api';
import { getPermissionTree } from '../role/api';
import { elementIcons } from '../../libs/icon';
	export default {
		data() {
			return {
				form: {
					permissionName: '',
					permissionCode: '',
					description: '',
					nodeType: '',
					level: 0,
					sort: 0,
					icon: '',
					linkUrl: '',
					path: '',
					parentId: 0,
				},
				title: '',
				visible: false,
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				iconList: [],
			}
		},
		created() {
			this.iconList = elementIcons;
		},
		mounted(){
			this.queryPermissionTreeList();
			this.$refs.perTree;
		},
		methods: {
			onSubmit() {
				//获取选中的菜单
				this.form.parentId = this.$refs.perTree.getCheckedKeys()[0]
				let data = this.form;
				saveOrUpdatePermission(data).then(res => {
					if(res.data.code == 0){
						this.title = '';
						this.form = {};
						this.$refs.perTree.setCheckedKeys([]);
						this.visible = false;
						this.$emit('refresh')
						Message.success("保存成功");
					}else{
						Message.error(res.data.msg);
					}
				})
			},
			receiveValues(value){
				console.log(value)
				this.visible = value.visible;
				this.title = value.title;
				if(value.userForm != null){
					this.form = value.userForm;
					// console.log(this.form.parentId)
					this.$refs.perTree.setCheckedKeys([this.form.parentId]);
				}
			},
			handleClose(done){
				 
				this.form = {};
				this.$refs.perTree.setCheckedKeys([]);
				this.visible = false
				this.$emit('refresh')
				done();
			},
			queryPermissionTreeList() {
				getPermissionTree().then(res => {
					if (res.data.code == 0) {
						this.treeData = res.data.data;
					}
				})
			},
			/**
			     * @description 图标弹窗框显示时触发
			     * @author 饺子
			    */
			    popoverShow() {
			      this.$nextTick(()=>{
			        this.activeName = '0'
			      })
			    },
				 /**
			     * @description 给icon绑定的点击事件
			     * @author 饺子
			     * @param { String } icon 图标
			     */
			    setIcon(icon) {
			      this.$set(this.form, 'icon', icon)
			    },
		}
	}
</script>

<style>
</style>